<template>
  <div>
    <h1>我的项目</h1>
    <el-tree
        v-if="!isLoading"
        :data="tree_data"
        node-key="id">
      <template #default="{ node ,data}">
        <el-row :gutter="20" v-if="node.isLeaf" type="flex" style="align-items: center">

          <el-col :span="6">
            {{ node.label }}
          </el-col>

          <el-divider direction="vertical"/>
          <el-col :span="4" :offset="1">
            当前状态:
            <el-tag type="primary"> {{data.pro_state}}</el-tag>
          </el-col>

          <el-col :span="10" :offset="1" v-if="role!=='admin'&&role!=='checker'">
            <el-divider direction="vertical"/>
            <el-button type="primary" @click="toApplyResource(data)">资源申请</el-button>
            <el-button type="primary" @click="toEnterLab(data)" v-if="data.app_status">进入实验</el-button>
            <el-popover
                placement="top-start"
                title="Tips"
                :width="200"
                trigger="hover"
                content="申请未完成，暂时无法进入实验"
                v-if="!data.app_status">
              <template #reference>
                <el-button type="info" plain>进入实验</el-button>
              </template>
            </el-popover>
            <el-button type="primary" @click="toReturnResource(data)">资源归还</el-button>
            <el-button type="primary" @click="toUpdateData(data)">实验数据</el-button>
          </el-col>

          <el-col :span="10" :offset="1" v-if="role==='checker'">
            <el-divider direction="vertical"/>
            <el-button type="primary" @click="toDoCheck(data)" v-if="data.pro_state==='申请完成'">开始查验</el-button>
            <el-popover
                placement="top-start"
                title="Tips"
                :width="200"
                trigger="hover"
                content="当前非查验时间，暂时无法开始查验"
                v-if="data.pro_state!=='申请完成'">
              <template #reference>
                <el-button type="info" plain>开始查验</el-button>
              </template>
            </el-popover>
          </el-col>

          <el-col :span="10" :offset="1" v-if="role==='admin'">
            <el-divider direction="vertical"/>
            <el-button type="primary" @click="toResourceConfirm(data)">资源申请确认</el-button>
            <el-button type="primary" @click="toReturnConfirm(data)">资源归还确认</el-button>
          </el-col>

        </el-row>

        <el-row :gutter="20" v-else>
          <el-col>
            {{ node.label }}
          </el-col>
        </el-row>
      </template>
    </el-tree>
  </div>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";

export default {
  name: "MyProject",
  data() {
    return {
      isLoading: true,
      tree_data: null,
      role: null
    }
  },

  created() {
    // TODO: get pi_id from route
    // this.pro_id = this.$route.params.pro_id
    this.pi_id = 3;
    this.role = sessionStorage.getItem("role");

    this.getData();
  },
  methods: {
    getData(){
      let that = this;
      get("/simpleProInfo/getInfo",{
        pi_id: this.pi_id
      }).then(function (res) {
        if (res.code ===1){
          res = res.data;
          for (const project of res) {
            project.label = "项目: " + project.project_name;
            for (const exp of project.children) {
              exp.label = "实验: " + exp.exp_name;
              for (const pro of exp.children) {
                pro.label = "功能单元: " + pro.pro_name;
                let flag = true;
                for(const drug of JSON.parse(pro.drug_info)){
                  flag = flag && drug.app_status==='0';
                }
                for(const equ of JSON.parse(pro.equ_info)){
                  flag = flag && equ.app_status==='0';
                }
                for(const animal of JSON.parse(pro.animal_info)){
                  flag = flag && animal.app_status==='0';
                }
                for(const sample of JSON.parse(pro.sample_info)){
                  flag = flag && sample.app_status==='0';
                }
                if (pro.pro_state==="尚未开始" && flag){
                  get("/funcUnit/updateState",{
                    id: pro.pro_id,
                    state: "申请完成"
                  }).then(function (res) {
                    if (res.code===1){
                      ElMessage.success({
                        showClose: true,
                        message: "实验数据状态已更新",
                        type: "success",
                        center: true
                      })
                    }
                  });
                  pro.pro_state = "申请完成";
                }
                flag = flag || pro.pro_state!=="尚未开始";

                pro.app_status = flag;
              }
            }
          }

          ElMessage.success({
            showClose: true,
            message: "项目数据获取成功",
            type: "success",
            center: true
          })

          that.tree_data = res;
          that.isLoading = false;
        }
      })
    },

    toApplyResource(data) {
      this.$router.push({
        name: "applyRes",
        params: {
          pro_id: data.pro_id
        }
      })
    },

    toEnterLab(data) {
      if (data.pro_state==="尚未开始"){
        get("/funcUnit/updateState",{
          id: data.pro_id,
          state: "申请完成"
        }).then(function (res) {
          if (res.code===1){
            ElMessage.success({
              showClose: true,
              message: "实验数据状态已更新",
              type: "success",
              center: true
            })
          }
        })
      }
      this.$router.push({
        name: "enterLab",
        params: {
          exp_id: data.exp_id,
          pro_id: data.pro_id,
          pro_name: data.pro_name,
        }
      })
    },

    toReturnResource(data) {
      this.$router.push({
        name: "returnRes",
        params: {
          pro_id: data.pro_id,
        }
      })
    },

    toUpdateData(data) {
      this.$router.push({
        name: "updateData",
        params: {
          pro_id: data.pro_id,
        }
      })
    },

    toResourceConfirm(data) {
      this.$router.push({
        name: "resourceConfirm",
        params: {
          pro_id: data.pro_id,
        }
      })
    },


    toReturnConfirm(data) {
      this.$router.push({
        name: "returnConfirm",
        params: {
          pro_id: data.pro_id,
        }
      })
    },

    toDoCheck(data){
      this.$router.push({
        name: "doCheck",
        params: {
          exp_id: data.exp_id,
          pro_id: data.pro_id,
          pro_name: data.pro_name,
          pi_id: data.pi_id,
        }
      })
      ElMessage.success({
        showClose: true,
        message: "登陆成功，欢迎您",
        type: "success",
        center: true
      });
    },
  },
}
</script>

<style lang="scss">

.el-tree-node__content {
  background-color: #fff;
  height: 50px;
}

</style>